<script setup lang="ts">
import { ref, onMounted } from "vue";
import DemoExposeChild from "./components/DemoExposeChild.vue";

let myMsg = ref("");

// 变量必须和属性 ref 的值相同
const demoExposeChildRef = ref();

const onClick = () => {
  myMsg.value = demoExposeChildRef.value.childMsg();
};

// 初始化自动调用
onMounted(() => {
  console.log(
    "demo-expose",
    demoExposeChildRef.value.childMsg(),
    demoExposeChildRef.value.getMsg("hello")
  );
});
</script>
<template>
  <h1>defineExpose、onMounted、ref DOM 对象</h1>
  <p>子组件暴露方法，父组件调用子组件的方法</p>
  <p>子组件返回值：{{ myMsg }}</p>
  <demo-expose-child ref="demoExposeChildRef"></demo-expose-child>
  <a href="javascript:void(0)" @click="onClick">点击</a>
</template>
